Ext.onReady(function(){
    
        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

		var centerTabPanel = new Ext.TabPanel({
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                items: [{
                    contentEl: 'center2',
                    title: 'Center Panel',
                    autoScroll: true
                }]
            });
        
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            new Ext.BoxComponent({
                region: 'north',
                height: 2, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html:''
                }
            }), {
                // lazily created panel (xtype:'panel' is default)
                region: 'south',
                contentEl: 'south',
                split: true,
                height: 100,
                minSize: 100,
                maxSize: 200,
                collapsible: true,
				hidden : true,
                title: 'South',
                margins: '0 0 0 0'
            }, {
                region: 'east',
                title: 'East Side',
                collapsible: true,
				hidden:true,
                split: true,
                width: 225, // give east and west regions a width
                minSize: 175,
                maxSize: 400,
                margins: '0 5 0 0',
                layout: 'fit', // specify layout manager for items
                items:            // this TabPanel is wrapped by another Panel so the title will be applied
                new Ext.TabPanel({
                    border: false, // already wrapped so don't add another border
                    activeTab: 1, // second tab initially active
                    tabPosition: 'top',
                    items: [{
                        html: '<p>A TabPanel component can be a region.</p>',
                        title: 'A Tab',
                        autoScroll: true
                    }, new Ext.grid.PropertyGrid({
                        title: 'Property Grid',
                        closable: true,
                        source: {
                            "(name)": "Properties Grid",
                            "grouping": false,
                            "autoFitColumns": true,
                            "productionQuality": false,
                            "created": new Date(Date.parse('10/15/2006')),
                            "tested": false,
                            "version": 0.01,
                            "borderWidth": 1
                        }
                    })]
                })
            }, {
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                title: 'West',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: {
                    type: 'accordion',
                    animate: true
                },
                items: [{title: '人事管理',
						xtype: 'treepanel',
						width: 200,
						autoScroll: true,
						split: true,
						iconCls: 'settings',
						loader: new Ext.tree.TreeLoader(),
						root: new Ext.tree.AsyncTreeNode({
							expanded: true,
							children: [{
								id:'table1',
								text: 'Menu Option 1',
								leaf: false,
								children: [{
									id:'gridPanelTest',
									text: '表格测试',
									url:Page_config.contextPath+'/page/grid.jsp',
									leaf: true
								}, {
									id:'formPanelTest',
									text: '表单测试',
									url:Page_config.contextPath+'/page/form.jsp',
									leaf: true
								}, {
									id:'table13',
									text: 'Menu Option 13',
									url:Page_config.contextPath+'/page/testno.jsp',
									leaf: true
								}]}, {
								id:'table2',
								text: 'Menu Option 2',
								url:'http://www.163.com',
								leaf: true
							}, {
								id:'table3',
								text: 'Menu Option 3',
								url:'http://www.cyqdata.com/android/article-detail-36645-english',
								leaf: true
							}]
						}),
						rootVisible: false,
						listeners: {
							click: function(n) {
								//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
								if(n.attributes.leaf){
									addTab(n.attributes.id,n.attributes.text,n.attributes.url);
								}

							}
						}
					},{
                    title: '协作管理',
                    html: '<p>Some settings in here.</p>',
                    border: false,
                    iconCls: 'settings'
					},{
                    title: '流程管理',
                    html: '<p>Some settings in here.</p>',
                    border: false,
                    iconCls: 'settings'
					},{
                    title: '组织管理',
                    html: '<p>Some settings in here.</p>',
                    border: false,
                    iconCls: 'settings'
                }]
            },
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
            centerTabPanel]
        });

        // get a reference to the HTML element with id "hideit" and add a click listener to it 
        Ext.get("hideit").on('click', function(){
            // get a reference to the Panel that was created with id = 'west-panel' 
            var w = Ext.getCmp('west-panel');
            // expand or collapse that Panel based on its collapsed property state
            w.collapsed ? w.expand() : w.collapse();
        });

		function addTab(id,title,url){
			var tblIte = centerTabPanel.getItem(id);
			if(tblIte){
				centerTabPanel.activate(tblIte);
			}else{
				centerTabPanel.add({
					id:id,
					title: title,
					iconCls: 'tabs',
					html:'<iframe scrolling="auto" name="fra_'+id+'" frameborder="0" width="100%" height="100%" src="'+url+'"></iframe>',
					closable:true
				}).show();
			}

			
    }
    });